{...} (Spread syntax)

JavaScript ES6 新增了 「...」 這個...符號?關鍵字!?運算字元?!

{...} 的中文名稱是「展開運算子」

記得第一次遇它時，

還以為別人的文章寫錯了...(超俗

想要 google 查資料卻不知道該打什麼，「...」!? (俗到爆...

{...} 展開運算子的功能是將陣列展開成各別元素

Syntax(from: MDN)

• 在函式裡它會這樣用

myFunction(...iterableObj);

• 在陣列或字串時它會這樣用

[...iterableObj, '4', 'five', 6];

• 在物件時它會這樣用

let objClone = { ...obj };

看起來好像很不錯，使用上不會太難，接著看範例吧

Example

// 平常要合併兩個陣列資料大多會使用 concat()  
let arr = [1, 2, 3];
let arr2 = [4, 5];
arr = arr.concat(arr2);
console.log(arr); //[1,2,3,4,5]

// 使用 {...} 後可以更簡潔
let arr = [1, 2, 3];
let arr2 = [4, 5];
console.log([...arr,...arr2]) //[1,2,3,4,5]

Example2

// 合併陣列 part2

let arr = ['a', 'b'];
let arr2 = [arr, 'c', 'd'];
console.log(arr2); // [ [ 'a', 'b' ], 'c', 'd' ] 

//使用 {...} 後
let arr = ['a', 'b'];
let arr2 = [...arr, 'c', 'd'];
console.log(arr2) //['a','b','c','d']